<template>
  <div class="space-user-analyze">
    <a-card title="用户上传分析">
      <v-chart :option="options" style="height: 320px" />
      <template #extra>
        <a-space>
          <a-segmented v-model:value="timeDimension" @change="getDataList" :options="timeDimensionOptions" />
          <a-input-search
            v-model="userId"
            placeholder="请输入用户 id"
            enter-button="搜索用户"
            @search="getDataList"
          />
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { listSpaceUserAnalyzeUsingPost } from '@/api/spaceAnalysisController.ts'
import VChart from 'vue-echarts'
import 'echarts'

interface Props {
  queryPublic?: boolean
  queryAll?: boolean
  spaceId?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  queryPublic: false,
  queryAll: false
})

// 获取使用情况
const dataList = ref<API.SpaceUserAnalyzeResponse[]>([])

// 用户选择
const timeDimension = ref<string>('day')
const userId = ref<number>()

// 定义选择框
const timeDimensionOptions = [
  { label: '日', value: 'day' },
  { label: '周', value: 'week' },
  { label: '月', value: 'month' }
]

const loading = ref(false)
const getDataList = async () => {
  loading.value = true

  const res = await listSpaceUserAnalyzeUsingPost({
    timeDimension: timeDimension.value,
    spaceId: props.spaceId as number,
    queryPublic: props.queryPublic,
    queryAll: props.queryAll,
    userId: userId.value
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data as []
  }
  loading.value = false
}

// 定义饼图
const options = computed(() => {
  const periods = dataList.value.map((item) => item.period) // 时间区间
  const counts = dataList.value.map((item) => item.totalCount) // 上传数量

  return {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: periods, name: '时间区间' },
    yAxis: { type: 'value', name: '上传数量' },
    series: [
      {
        name: '上传数量',
        type: 'line',
        data: counts,
        smooth: true, // 平滑折线
        emphasis: {
          focus: 'series'
        }
      }
    ]
  }
})

onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss"></style>
